<template>
    <div>

        <!-- 此处注意写法v-model:content -->
        <QuillEditor ref="myQuillEditor" theme="snow" v-model:content="(textContents as string)" :options="data.editorOption"
            contentType="html" @update:content="setValue()" />
        <!-- 使用自定义图片上传 -->
        <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
    </div>
</template>
  
<script lang="ts" setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { reactive, onMounted, ref, toRaw, watch, computed } from 'vue'

const props = defineProps(['msg'])
const emit = defineEmits(['update:msg'])
const content = ref('')
const myQuillEditor = ref()
const fileBtn = ref()
// // 通过watch监听回显，笔者这边使用v-model:content 不能正常回显
// watch(() => props.msg, (val) => {
//     toRaw(myQuillEditor.value).setHTML(val)
// }, { deep: true })

const textContents = computed(
    {
        set(val) {
            emit('update:msg', val)
        },
        get() {
            return props.msg
        }
    }
)
const data = reactive({
    content: '',
    editorOption: {
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                ["blockquote", "code-block"], // 引用
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                [{ script: "sub" }, { script: "super" }], // 上标/下标
                [{ indent: '-1' }, { indent: '+1' }], // 缩进
                [{ direction: 'rtl' }], // 文本方向
                [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                [{ font: [] }], // 字体种类
                [{ align: [] }], // 对齐方式
                ['clean'], // 清除文本格式
                ['link', 'image', 'video'] // 链接、图片、视频
            ]
        },
        placeholder: '请输入内容...'
    }
})
const imgHandler = (state: any) => {
    if (state) {
        fileBtn.value.click()
    }
}
// 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法
const setValue = () => {
    const text = toRaw(myQuillEditor.value).getHTML()
}
const handleUpload = (e: any) => {
    const files = Array.prototype.slice.call(e.target.files)
    // console.log(files, "files")
    if (!files) {
        return
    }
    const formdata = new FormData()
    formdata.append('file', files[0])
    // backsite.uploadFile(formdata)  // 此处使用服务端提供上传接口
    //     .then(res: any => {
    //         if (res.data.url) {
    //             const quill = toRaw(myQuillEditor.value).getQuill()
    //             const length = quill.getSelection().index
    //             quill.insertEmbed(length, 'image', res.data.url)
    //             quill.setSelection(length + 1)
    //         }
    //     })
}
// 初始化编辑器
onMounted(() => {
    const quill = toRaw(myQuillEditor.value).getQuill()
    if (myQuillEditor.value) {
        quill.getModule('toolbar').addHandler('image', imgHandler)
    }
})
//聚焦最后一个文字
const focusLast = () => {
    const quill = toRaw(myQuillEditor.value).getQuill()
    quill.setSelection(quill.getText().length)
}
// 修改值
const setMsg = (val: string) => {
    toRaw(myQuillEditor.value).setHTML(val)
}
defineExpose({
    focusLast,
    setMsg
})
</script>
<style scoped lang="less">
// 调整样式
:deep(.ql-editor) {
    min-height: 600px;
}

:deep(.ql-formats) {
    height: 21px;
    line-height: 21px;
}
</style>
  
  